<template>
  <div class="works-list">
    <h2 class="text-2xl font-bold mb-6 text-center">作品列表</h2>
    <el-table :data="works" style="width: 100%">
      <el-table-column label="封面图片" width="150">
        <template #default="scope">
          <el-image :src="scope.row.workPicture" fit="cover" style="width: 100px; height: 100px;"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="作品标题" width="200"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button type="text" @click="handleAddChapter(scope.row)">添加章节</el-button>

          <el-dialog
            title="添加章节"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form :model="chapterForm" :rules="rules" ref="chapterFormRef">
              <el-form-item label="章节标题" prop="title">
                <el-input v-model="chapterForm.title" placeholder="请输入章节标题"></el-input>
              </el-form-item>
              <el-form-item label="章节内容" prop="content">
                <el-input type="textarea" v-model="chapterForm.content" placeholder="请输入章节内容"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addChapter">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      works: [], // 存储作品列表
      dialogVisible: false, // 控制对话框显示
      selectedWork: null, // 当前选中的作品
      chapterForm: {
        title: '',
        content: ''
      },
      rules: {
        title: [{ required: true, message: '请输入章节标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入章节内容', trigger: 'blur' }]
      }
    };
  },
  created() {
    this.fetchWorks();
  },
  methods: {
    handleAddChapter(work) {
      this.selectedWork = work;
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 获取作品列表
    fetchWorks() {
      this.$http.get('/work')
        .then(response => {
          this.works = response.data;
          // console.log(this.works);
        })
        .catch(error => {
          console.error('获取作品列表失败:', error);
        });
    },
    // 添加章节
    addChapter() {
      this.$refs.chapterFormRef.validate(valid => {
        if (valid) {
          const chapterData = {
            workId: this.selectedWork.id,
            title: this.chapterForm.title,
            content: this.chapterForm.content
          };
          this.$http.post('/chapter', chapterData)
            .then(response => {
              if (response.data) {
                this.$message.success('章节添加成功');
                this.dialogVisible = false;
                this.chapterForm = { title: '', content: '' };
              } else {
                this.$message.error('添加失败，请重试');
              }
            })
            .catch(error => {
              this.$message.error('添加失败，请稍后重试');
              console.error('添加章节请求出错:', error);
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.works-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.el-table {
  margin-top: 20px;
}

.el-dialog {
  border-radius: 8px;
}
</style>